<template>
  <div class="my-product">
    <h3>标题:{{price}}</h3>
    <p>价格: {{title}}元</p>
    <p>{{info}}</p>
    <button @click="sub">点击砍一刀</button>
  </div>
</template>

<script>
export default {
   // 使用 props 接收父组件传递的数据
  // 数组里面写字符串, 字符串就是父组件传递的属性名
  // 接收到数据后, 可以把它们当 data 中的数据来使用
 //props:['price','title','info','idaa'],
 props:{
  //要接受的数据
    price:{
    //必须项,必须传过来
    required:true,
    //类型
    type:String
  },
   title:{
    required:true,
    type:Number
   },
   info:{
     
    type:String,
    default:'非常好吃 我是默认值'

   },
   idaa:{
    required:true,
    type:Number
   }
 },
  
  methods:{
    sub(){
      // 单向数据流: 父组件传递给子组件的数据, 不能直接修改, 如果修改, 父组件收不到数据更新的通知
      // Vue 限制的这个功能
      // Vue 不允许在子组件中修改父组件传递的数据, 因为这样会导致数据操作混乱
      // this.price = this.price - Math.random()
      // 知道当前组件是谁?
      // 为什么要传给子组件 id? 
      // 最终目的: 子传父时, 要携带价格和 id 
      // console.log(this.id)
      // this.$emit() 触发事件, 同时可以传参
      // 参数1: 事件名
      // 参数2 ~ 参数N: 参数
      this.$emit('sayPrice',2,this.idaa)
    }
  }


}

</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>
    .box {
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      transition: .3s;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      padding: 0 20px;
      border-top: 1px solid #ccc;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
</style>